// components/Strategy.js
import React, { useState, useEffect, useCallback } from 'react';
import styles from '../css/strategy.module.css';
import leftt from '../assets/left.png';
import defaultImg from '../assets/pandaback.png';
import lovee from '../assets/love.png';
import redlove from '../assets/redlove.png';
import starr from '../assets/graystar.png';
import starone from '../assets/nullstar.png';
import comment from '../assets/comment.png';
import starFilled from '../assets/redstar.png';
import avatar from '../assets/avatar.jpg';
import { Swiper } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import {
  fetchCollectData,
  fetchCommentList,
  fetchStrategyList,
  toggleLike,
  toggleCollect
} from '../api/strategy';
import { imgUrl } from '../config'; // 导入imgUrl
/**
 * 函数防抖工具
 * @param {Function} func - 需要防抖的函数
 * @param {number} delay - 延迟时间(ms)
 * @returns {Function} - 防抖处理后的函数
 */
const debounce = (func, delay) => {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
};

/**
 * 函数节流工具
 * @param {Function} func - 需要节流的函数
 * @param {number} delay - 间隔时间(ms)
 * @returns {Function} - 节流处理后的函数
 */
const throttle = (func, delay) => {
  let lastCall = 0;
  return function (...args) {
    const now = new Date().getTime();
    if (now - lastCall < delay) return;
    lastCall = now;
    return func.apply(this, args);
  };
};

/**
 * 攻略详情页组件
 * 展示攻略详情、评论列表，并处理用户交互
 */
const Strategy = () => {
  // 从sessionStorage获取游戏信息和用户ID
  const [game, setGame] = useState(JSON.parse(sessionStorage.getItem("game")) || {});
  const [userid, setUserid] = useState(JSON.parse(sessionStorage.getItem("userid")) || null);
  
  // 数据状态管理
  const [shuzu, setShuzu] = useState([]);        // 用户收藏/点赞数据
  const [datas, setDatas] = useState([]);        // 评论列表数据
  const [array, setArray] = useState([]);        // 攻略详情数据
  const [banner, setBanner] = useState([]);      // 轮播图数据
  
  // 加载状态和错误处理
  const [loading, setLoading] = useState(true);  // 加载状态
  const [error, setError] = useState(null);      // 错误信息
  
  // 用户交互状态
  const [isLiked, setIsLiked] = useState(false);      // 是否点赞
  const [isCollected, setIsCollected] = useState(false); // 是否收藏
  const [showLikeToast, setShowLikeToast] = useState(false); // 点赞提示
  const [showCollectToast, setShowCollectToast] = useState(false); // 收藏提示
  
  // 路由导航
  const navigate = useNavigate();

  // 预加载图片资源，优化用户体验
  useEffect(() => {
    const preloadImages = [starFilled, starr];
    preloadImages.forEach(src => {
      const img = new Image();
      img.src = src;
    });
  }, []);

  // 监听收藏数据变化，更新收藏状态
  useEffect(() => {
    if (shuzu.length > 0 && game.id) {
      const isUserCollected = shuzu.some(item => item.intro_id === game.id && item.type === 1);
      setIsCollected(isUserCollected);
    }
  }, [shuzu, game]);

  // 监听点赞数据变化，更新点赞状态
  useEffect(() => {
    if (shuzu.length > 0 && game.id) {
      const isUserLiked = shuzu.some(item => item.intro_id === game.id && item.type === 3);
      setIsLiked(isUserLiked);
    }
  }, [shuzu, game]);

  // 组件挂载或游戏信息变化时初始化数据
  useEffect(() => {
  const fetchInitialData = async () => {
  try {
    // 并行请求多个API
    const [collectRes, commentRes, strategyRes] = await Promise.all([
      fetchCollectData(userid),
      fetchCommentList(game.id),
      fetchStrategyList(3)
    ]);

    // 直接使用响应数据，不需要再访问.data.data
    setShuzu(collectRes.data || []);
    setDatas(commentRes.data || []);
    
    const filteredArray = (strategyRes.data || []).filter(item => item.id === game.id);
    setArray(filteredArray);

    setLoading(false);
  } catch (error) {
    setError(error.message);
    setLoading(false);
  }
};

    fetchInitialData();
  }, [game, userid]);

  // 返回上一页
  const left = () => {
    window.history.back(-1);
  };



  // 跳转到添加评论页面
  const adds = () => {
    if (game && game.id) {
      sessionStorage.setItem("comentid", game.id);
      sessionStorage.setItem("status", 1);
      navigate("/scenicname");
    }
  };

  // 图片加载失败时的默认处理
  const fn = (e) => {
    e.target.src = defaultImg;
  };

  // 跳转到评论详情页
  const comtent = (i, id, trid) => {
    if (datas && datas[i] && game) {
      sessionStorage.setItem("comitem", JSON.stringify(datas[i]));
      sessionStorage.setItem("scenic_ids", game.scenic_id || '');
    }
  };

  // 点赞处理函数，使用节流优化，防止重复点击
  const handleLove = useCallback(throttle(async () => {
    if (!userid || !game || !game.id) return;

    try {
      // 调用点赞API
      const response = await toggleLike(userid, game.id);

      if (response.data.data == 1) {
        // 点赞成功
        setIsLiked(true);
        setShowLikeToast(true);
        setTimeout(() => setShowLikeToast(false), 2000);
        // 更新收藏数据
        fetchCollectData(userid).then(res => setShuzu(res.data.data || []));
      } else if (response.data.data == 2) {
        // 取消点赞
        setIsLiked(false);
        fetchCollectData(userid).then(res => setShuzu(res.data.data || []));
      }
    } catch (error) {
      // 错误处理
      setError(error.message);
    }
  }, 1000), [userid, game]);

  // 收藏处理函数，使用节流优化
  const [isCollecting, setIsCollecting] = useState(false);
  const handleStart = useCallback(throttle(async () => {
    if (!userid || !game || !game.id || isCollecting) return;
    setIsCollecting(true);

    try {
      // 调用收藏API
      const response = await toggleCollect(userid, game.id);

      if (response.data.data == 1) {
        // 收藏成功
        setIsCollected(true);
        setShowCollectToast(true);
        setTimeout(() => setShowCollectToast(false), 2000);
        // 更新收藏数据
        fetchCollectData(userid).then(res => setShuzu(res.data.data || []));
      } else if (response.data.data == 2) {
        // 取消收藏
        setIsCollected(false);
        fetchCollectData(userid).then(res => setShuzu(res.data.data || []));
      }
    } catch (error) {
      // 错误处理
      setError(error.message);
    } finally {
      // 请求完成，重置状态
      setIsCollecting(false);
    }
  }, 1000), [userid, game, isCollecting]);

  // 渲染评分星星组件
  const renderScore = (score) => {
    const stars = [];
    const fullStars = Math.floor(score || 0);
    const hasHalfStar = score % 1 >= 0.5;

    // 渲染实心星星
    for (let i = 0; i < fullStars; i++) {
      stars.push(<img key={`full-${i}`} src={starFilled} alt="★" />);
    }

    // 渲染半颗星
    if (hasHalfStar) {
      stars.push(<img key="half" src="./img/starthree.png" alt="½" />);
    }

    // 渲染空心星星
    const emptyStars = 5 - stars.length;
    for (let i = 0; i < emptyStars; i++) {
      stars.push(<img key={`empty-${i}`} src={starone} alt="☆" />);
    }

    return <div className={styles.start}>{stars}</div>;
  };

  // 加载状态渲染
  if (loading) {
    return <div className={styles.loading}>加载中...</div>;
  }

  // 错误状态渲染
  if (error) {
    return <div className={styles.error}>加载失败: {error}</div>;
  }

  // 主界面渲染
  return (
    <div className={styles.big}>
      {/* 收藏成功提示 */}
      {showCollectToast && (
        <div className={styles.revamp}>
          <div className={styles.revamps}>
            <div className={styles.revampOne}>
              收藏成功！
            </div>
          </div>
        </div>
      )}

      {/* 点赞成功提示 */}
      {showLikeToast && (
        <div className={styles.revamp}>
          <div className={styles.revamps}>
            <div className={styles.revampOne}>
              点赞成功！
            </div>
          </div>
        </div>
      )}

      {/* 顶部导航和轮播图区域 */}
      <div className={styles.top}>
        <div className={styles.left} onClick={left}>
          <img src={leftt} alt="返回" onError={fn} />
        </div>

        <div className="plug_slider">
          <Swiper
            autoplay={true}
            loop
            onIndexChange={(index) => console.log('slide to', index)}
          >
            {banner && banner.length > 0 ? (
              // 渲染轮播图
              banner.map((item, index) => (
                <Swiper.Item key={index}>
                  <div style={{ width: '100%', height: '220px' }}>
                    <img
                      src={item ? `${imgUrl}${item}` : './img/placeholder.png'}
                      alt={`轮播图${index + 1}`}
                      onError={fn}
                      style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                    />
                  </div>
                </Swiper.Item>
              ))
            ) : (
              // 没有轮播图数据时显示占位图
              <Swiper.Item>
                <div style={{ width: '100%', height: '300px' }}>
                  <img src="./img/placeholder.png" alt="暂无图片" onError={fn} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                </div>
              </Swiper.Item>
            )}
          </Swiper>
        </div>
      </div>

      {/* 攻略标题 */}
      <h3 id="two" className={styles.title}>{array[0]?.title || '暂无标题'}</h3>

      {/* 作者信息 */}
      <div className={styles.imager}>
        <img
          id="headImg"
          src={avatar}
          alt="头像"
          onError={fn}
        />
        <span id="title" className={styles.userName}>
          {array[0]?.name || '旅游达人'}
        </span>
        <span id="date" className={styles.date}>
          {array[0]?.create_time ? array[0].create_time.split(' ')[0] : '2023-05-01'}
        </span>
      </div>

      {/* 攻略内容简介 */}
      <div className={styles.contentFont}>
        <span className={styles.introduce}>{array[0]?.introduce || '暂无内容介绍'}</span>
      </div>

      {/* 评论区域 */}
      <div className={styles.comment}>
        <h3>评论</h3>
        <span className={styles.commentCount}>
          全部 <span id="even">{datas.length || 0}</span> 条
        </span>
      </div>

      {/* 评论列表 */}
      <div className={styles.bigComment}>
        {datas && datas.length > 0 ? (
          // 渲染评论列表
          datas.map((item, index) => (
            <div
              key={index}
              className={styles.commentItem}
              onClick={() => comtent(index, item.id, item.intri_id)}
            >
              <div className={styles.coment}>
                <img
                  src={item.avatar ? `${imgUrl}${item.avatar}` :avatar}
                  alt="用户头像"
                  onError={fn}
                />
                <div style={{ width: '100%' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
                    <span>{item.name || '匿名用户'}</span>
                    <span style={{ marginRight: '20px' }}>{item.create_time || ''}</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <p>评分</p>
                    {renderScore(item.score)}
                  </div>
                </div>
              </div>
              <div className={styles.contentFont}>
                <span style={{ marginLeft: '20px' }}>{item.content || '暂无评论内容'}</span>
              </div>
              {/* 评论图片 */}
              {item.img && (
                <div style={{ marginLeft: '20px' }} className={styles.commentImg}>
                  <img
                    src={item.img}
                    alt="评论图片"
                    onError={fn}
                    style={{ width: '90px', height: '90px', objectFit: 'cover' }}
                  />
                </div>
              )}
              <div className={styles.browse}>
                <span>浏览{item.number || 0}</span>
              </div>
            </div>
          ))
        ) : (
          // 没有评论时显示提示
          <p className={styles.noComment}>暂无评论...</p>
        )}
      </div>

      {/* 底部操作栏 */}
      <div className={styles.bottom}>
        <div className={styles.add} onClick={adds}>添加评论...</div>
        <div className={styles.threeBlock}>
          <div className={styles.love}>
            <img
              id="lover"
              onClick={handleLove}
              src={isLiked ? redlove : lovee}
              alt="点赞"
              onError={fn}
            />
          </div>
          <div className={styles.love}>
            <img
              id="startImg"
              onClick={handleStart}
              src={isCollected ? starFilled : starr}
              alt="收藏"
              onError={fn}
              style={{ opacity: isCollecting ? 0.5 : 1 }} // 收藏中状态视觉反馈
              disabled={isCollecting} // 收藏中禁用按钮
            />
          </div>
          <div className={styles.love}>
            <img
              src={comment}
              alt="评论"
              onError={fn}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Strategy;    